const {
  resolve,
  join
} = require("path")
// const fs = require("fs")
const Vueloader = require("vue-loader/lib/plugin")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 用于把HTML页面放入内存
// const Minicss = require("mini-css-extract-plugin") // webpack4.0以后的打包css文件
const CopyWebpackPlugin = require("copy-webpack-plugin")
const {
  CleanWebpackPlugin
} = require("clean-webpack-plugin")
const WebpackBar = require("webpackbar")
console.log(join(process.cwd(), "./src/index.html"))
const htmlplugin = new HtmlWebpackPlugin({
  template: join(process.cwd(), "./public/index.html"), // 源头文件
  filename: "index.html", // 生成首页的文件名称
  environment: {
    arrowFunction: true
  } // 打包不使用箭头函数

})
// const css = new Minicss({
//   // 输出css独立文件
//   filename: `/static/css/[name].[chunkhash].css`,
//   chunkFilename: "[id].[chunkhash].css" // 或者id
// })
module.exports.bases = {

  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "@": "../src"
    }
  },
  externals: {
    vue: 'Vue',
    vuex: 'Vuex'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: "vue-loader"
    },
    {
      test: /\.js$/,
      use: ["babel-loader", "eslint-loader"],
      include: [resolve(__dirname, "src")],
      // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: { modules: true }
        },
        'postcss-loader',
        {
          loader: 'px2rem-loader',
          options: {
            renUnit: 37.5,  //表示 1rem = 20px, 取值是通过 设计稿的宽度/10
            remPrecision: 2  //px转rem 精度，小数点后的位数
          }
        },
        'sass-loader'
      ]
    },
    // {
    //   test: /\.css$/,
    //   use: [{
    //     loader: Minicss.loader,
    //     options: {// css插件在预编译配置
    //     }
    //   }, "css-loader"]
    // },
    // {
    //   test: /\.less$/, // 匹配特定文件的正则表达式或正则表达式数组
    //   use: [{
    //     loader: Minicss.loader,
    //     options: {// css插件在预编译配置
    //     }
    //   }, "css-loader", "less-loader"]
    // },
    // {
    //   test: /\.(scss|sass)$/, // 匹配特定文件的正则表达式或正则表达式数组
    //   use: [{
    //     loader: Minicss.loader,
    //     options: {// css插件在预编译配置
    //     }
    //   }, "css-loader", "sass-loader"]
    // },
    {
      test: /\.(png|jpe?g|gif|svg|jpg)(\?.*)?$/,
      loader: "url-loader",
      options: {
        limit: 1024,
        name: "static/img/[name].[ext]"
      }
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: "url-loader",
      options: {
        limit: 1024,
        name: "static/media/[name].[ext]"
      }
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: "url-loader",
      options: {
        limit: 1024,
        name: "static/fonts/[name].[ext]"
      }
    }
    ]
  },
  optimization: { // 代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
    splitChunks: {
      chunks: "all"
    }
  },
  plugins: [
    htmlplugin,
    // css,

    new Vueloader(),

    new CopyWebpackPlugin([{
      from: resolve(process.cwd(), "./static"),
      to: `./static`,
      ignore: [".*"],
    }]),
    new WebpackBar(),
    new CleanWebpackPlugin(),

  ]
}